<template>
	<div class="wrap">			
		<xcl-header :show="loading.show" :call-back="()=>{}" :page-title="pageTitle" :header-right="headerRight"></xcl-header>
		<div class="content">
			<div v-if="messageInfo.length === 0" >
		      <div class="no-data">暂无公告</div>
		    </div>
			<div class="card" v-else>
		      	<ul style="padding:0 .5rem">
		      		<li class="mitem" v-for="message in messageInfo" v-link="{name:'BulletinView',params:{Id:message.id}}">
		      			<div class="t3">{{message.ct | getLastTimeStr}}</div>
		      			<div class="mt5">{{message.t}}</div>
		      		</li>	      		
		      	</ul>
			</div>
		</div>
	</div>
</template>
<script>
	import xclHeader from '../components/header.vue'
	let MessageProxy = require("../proxy/message_proxy");
	let Message = new MessageProxy;
	export default {
		data(){
			return{
				pageTitle:'产品公告',
				productId:this.$route.params.Id,
				messageInfo:[],
				loading:{
                    show:false,
                    showTxt:'数据加载中...'
               },
               searchKey:{
                    page:1,
                    limit:10
                },
			}
		},
		route:{
            deactivate (transition){
                $('#content').off('scroll');
                transition.next();
            }
        },
		ready(){
			this.getBulletin();
            $('#content').on('scroll', () => {
              this.getBulletin();
            });
		},
		methods:{
			getBulletin(){
				var _this=this;
				Message.getProductBulletinByProductId(this.productId,1,0,this.searchKey.page,this.searchKey.limit,function(data){
					if(data.code === 200 && data.results && data.results.length){
						_this.messageInfo=_this.messageInfo.concat(data.results);
					}
				});
			}
		},
		components:{
           "xclHeader":xclHeader,          
        }
	}
</script>
<style lang="stylus">
ul{
	margin:0;
	padding:0;
	list-style: none;
}
.mitem {
  padding: 15px 0;
  border-bottom: 1px solid #dadada;
}
.mitem:last-child {
  border-bottom: none;
}
.mitem.click {
  cursor: pointer;
}
.mitem.click:hover {
  background-color: #f2f2f2;
}
.mt5 {
  margin-top: 5px;
}
.t3 {
  color: #999;
}
</style>